import Vue from 'vue'
import VueRouter from 'vue-router'

import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {//关于
    path: '/about',
    name: 'about',
    component: () => import('../views/AboutView.vue')
  },
  { //购物车页面
    path: "/cart",
    name: "Cart",
    component: () => import('../views/Cart/index.vue')
  }
]

const router = new VueRouter({
  mode: 'history', // 路由模式 vue的路由 有俩种模式
  //面试题： hash模式和history模式  hash模式和history的区别
  // hash 在地址栏中 默认多一个#  原理是基于原生js的window.onhashchange事件来完成的组件切换

  //  history模式 地址中没有#号 原理：基于html5的history.pushState的api来完成切换组件的

  // 面试题：前端项目打包上线后 为什么会出现404问题
  // 1 因为vue的项目使用的了history模式，所以打包后会出现404问题
  // 2. 解决方案：在nginx服务器中配置一个try_files重定向，把所有不存在的路由都重定向到index.html

  base: process.env.BASE_URL, // 基础路径 当前的环境的基本路径process.env 判断当前环境的变量 BASE_URL  http://localhost:8080/

  // 如何判断开发环境：process.env.NODE_ENV--判断当前的开发环境的操作符
  // 1.development 开发环境
  // 2.production 生产环境


  routes //路由表
})

export default router
